<template>
  <Header/>
  <main class="container max-w-screen-xl mx-auto p-4">
    <div class="grid grid-cols-4 gap-4">
      <div class="col-span-4 md:col-span-3">
        <TagInfo/>
      </div>
      <div class="col-span-4 md:col-span-1">
        <user-info/>
        <CategoryInfo/>
      </div>
    </div>
  </main>
  <ScrollToTopButton/>
  <Footer/>
</template>

<script setup>
import Header from "@/layouts/fronted/components/Header.vue";
import CategoryInfo from "@/layouts/fronted/components/CategoryInfo.vue";
import UserInfo from "@/layouts/fronted/components/UserInfo.vue";
import Footer from "@/layouts/fronted/components/Footer.vue";
import TagInfo from "@/layouts/fronted/components/TagInfo.vue";
import ScrollToTopButton from "@/components/ScrollToTopButton.vue";
</script>

<style scoped>
.max-w-sm {
  max-width: 48rem;
}
</style>